@import '../base/mixin';
/*
我是不会被保留的。

*/

/*！我是会被保留的
*/
$red:red;
$base-color:hsl(222,100%,50%);
$light-color:lighten($base-color,30%);
$dark-color:darken($base-color,30%);
.title {
  background: $red;
}

.a-link {
  border: 1px solid #000;
  a {
    color: aqua;
    &:hover {
      color: red;
    }
  }
  & &-text {
    color: blue;
  }
  font:{
      family:'Courier New', Courier, monospace;
      size: 15px;
      weight:bold; 
  }
}

.alert-warning {
    @include alert;
}

.alert-fn{
  @include fnalert(#aaa,#000);
}

.extend{
 border: 1px solid #000;
 a{
   color: red;
 }
}

.extend-info{
  @extend .extend;
  font-size: percentage($number: 35/75);
}
.color{
  background:desaturate(hsl(222,100%,50%),30%)
}
$btn-color:(light:#aaa,dark:#000);

.btn{
  background: map-get($map: $btn-color, $key:dark ); 
}
// 下划线开头的scss不会被编译，用于模块化
//绝对值
/*
abs绝对值
round 四舍五入
ceil向前进一位
floor 只保留整数位
percentage 百分位
min(1,2,3)最小的数
max（最大数）
字符串函数
to-upper-case大写全部
to-lower-case小写全部
str-length返回长度
saturate颜色函数 增加饱和度
desaturate颜色函数 减少饱和度
opacify 不透明度
transparentize怎么透明度
interpolation 把变量的值放进注释中
**/
$name:"info";
.alert-#{$name}{
  background: red;
}
$use-boolean:true;
.rounded{
  @if $use-boolean{
    font-size: 30px;
  }@else{
    font-size: 20px;
  }
}

$colums:4;
// through 包含结束的值 to 不包含结束的值
@for $i from 1 through $colums{
  .col-#{$i} {
    width:100%/$colums*$i
  }
}
$icons:success error warning;
 @each $icon in $icons{
   .icon-#{$icon}{
     background-image: url(/#{$icon}.png)
   }
 }

 @function remfn($key){

  @return $key/75+rem;
 }
 .abc{
   font-size: remfn(60)
 }